$breakpoint-small: 576px;
$breakpoint-medium: 768px;
$breakpoint-large: 1200px;

:root {
  --t-copilot-drawer-ding-width: 0px;
  --t-copilot-drawer-width: 480px;
}


.t-copilot-container {
  --drawer-width: var(--t-copilot-drawer-width);

  position: fixed;
  width: 48px;
  height: 48px;
  border-radius: 25px;
  border: solid 2px var(--t-color, '#155eef');
  background-color: white;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 990; /* 抽屉默认是1000，设置为该值为了防止AI图表显示在评论抽屉上边, 不能低于990是因为移动端浮动按钮默认是990 */
  transition: right 0.3s ease-in-out;

  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;

  &.headless{
    opacity: 0;

    .t-copilot-button {
      display: none;
    }

    &.open {
      opacity: 1;
    }
  }

  &.open {
    background-color: transparent;
    border-width: 0;
    box-shadow: none;

    // .t-copilot-button {
    //   display: none;
    // }
  }

  .t-copilot-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .t-copilot-drawer {
    position: fixed;
    top: 0;
    right: -100vw; /* 初始隐藏在右侧 */
    width: var(--drawer-width);
    max-width: 85vw;
    height: 100%;
    background-color: #f0f0f0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out;
    // padding: 20px;
    box-sizing: border-box;
    opacity: 0;

    @media (max-width: $breakpoint-medium) {
      max-width: 100vw;
    }

    &.open {
      right: 0;
      opacity: 1;
    }

    .t-copilot-drawer-toolbar {
      position: absolute;
      width: 100%;
      // background-color: #f0f2f5;
      background-color: transparent;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 45px;
      padding-left: 16px;
      padding-right: 16px;
      // opacity: 0.8;

      &_left {
        flex-shrink: 1;
        flex-basis: 80px;
        display: flex;
        column-gap: 12px;
        justify-content: flex-start;
        opacity: 0;
      }

      &_right {
        flex-shrink: 1;
        flex-basis: 80px;
        display: flex;
        column-gap: 12px;
        justify-content: flex-end;

        .t-copilot-toolbar-close {
          display: none;
          @media (max-width: $breakpoint-medium) {
            display: unset;
          }
          i{
            font-size: 12px;
          }
        }

        .t-copilot-toolbar-ding {
          display: flex;
          justify-content: flex-end;
          cursor: pointer;

          @media (max-width: $breakpoint-medium) {
            display: none;
          }

          &.pin {
            opacity: 1;
            transform: unset;
          }
          &.unpin {
            opacity: 0.5;
            transform: rotate(45deg);
          }
        }
      }
      &_center {
        flex: 1;
        flex-basis: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
      }
    }

    .t-copilot-drawer-main {
      height: calc(100% - var(--t-copilot-drawer-innerHeaderHeight, 0px));
      margin-top: var(--t-copilot-drawer-innerHeaderHeight, 0px);
    }
  }
}

body.t-copilot-mounted {
  &.t-copilot-dragging {
    user-select: none;
  }
  &.t-copilot-ding {
    --t-copilot-drawer-ding-width: var(--t-copilot-drawer-width);
    div#app, div[data-v-app] {
      width: calc(100vw - var(--t-copilot-drawer-width));
    }
    div.q-dialog {
      .fixed-full {
        width: calc(100vw - var(--t-copilot-drawer-width));
      }
      .q-dialog__inner {
        margin-right: var(--t-copilot-drawer-width);
      }
    }
  }
}
